<template>
    <div class="app-container">
        <el-form  ref="queryForm" size="small" label-width="100px">
            <el-row>
                <el-card shadow="always" style="margin-bottom: 10px;">

                    <el-radio-group v-model="queryType" size="mini">
                        <el-radio v-for="dict in dict.type.crm_dept_level" border  v-show="dict.value != 1" :key="dict.value"
                            :label="dict.value">{{
                                dict.label }}</el-radio>
                    </el-radio-group>

                </el-card>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="时间" prop="timeGroup">
                        <el-date-picker v-model="timeGroup" type="daterange" :picker-options="pickerOptions" editable
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
                            value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-table v-loading="loading"
                  :data="custinfoList"
                  fit style="width: 100%"
                  show-summary
                  :summary-method="getSummaries">
            <el-table-column label="部门归属" align="center" prop="dept_name" min-width="3%" />
            <el-table-column label="未处理" align="center" prop="starlevel_99" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ scope.row.starlevel_99 +'/'+ scope.row.starlevel99_ratio +'%'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="0星数据" align="center" prop="starlevel_0" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ scope.row.starlevel_0 +'/'+ scope.row.starlevel0_ratio +'%'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="0星上门" align="center" prop="visitcount_0" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ scope.row.visitcount_0 +'/'+ scope.row.visitcount0_ratio +'%'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="1星数据" align="center" prop="starlevel_1" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ scope.row.starlevel_1 +'/'+ scope.row.starlevel1_ratio +'%'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="1星上门" align="center" prop="visitcount_1" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ scope.row.visitcount_1 +'/'+ scope.row.visitcount1_ratio +'%'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="2星数据" align="center" prop="starlevel_2" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ scope.row.starlevel_2 +'/'+ scope.row.starlevel2_ratio +'%'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="2星上门" align="center" prop="visitcount_2" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ scope.row.visitcount_2 +'/'+ scope.row.visitcount2_ratio +'%'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="3星数据" align="center" prop="starlevel_3" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ scope.row.starlevel_3 +'/'+ scope.row.starlevel3_ratio +'%'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="3星上门" align="center" prop="visitcount_3" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ scope.row.visitcount_3 +'/'+ scope.row.visitcount3_ratio +'%'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="4星数据" align="center" prop="starlevel_4" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ scope.row.starlevel_4 +'/'+ scope.row.starlevel4_ratio +'%'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="4星上门" align="center" prop="visitcount_4" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ scope.row.visitcount_4 +'/'+ scope.row.visitcount4_ratio +'%'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="5星客户" align="center" prop="starlevel_5" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ scope.row.starlevel_5 +'/'+ scope.row.starlevel5_ratio +'%'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="5星客户上门" align="center" prop="visitcount_5" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ scope.row.visitcount_5 +'/'+ scope.row.visitcount5_ratio +'%'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="2星+" align="center" prop="starlevel_7" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ scope.row.starlevel_7 +'/'+ scope.row.starlevel7_ratio +'%'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="2星+上门" align="center" prop="visitcount_7" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ scope.row.visitcount_7 +'/'+ scope.row.visitcount7_ratio +'%'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="总数据量" align="center" prop="starcount_total" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ scope.row.starcount_total }}</span>
                </template>
            </el-table-column>
            <el-table-column label="总上门量" align="center" prop="visitcount_total" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ scope.row.visitcount_total }}</span>
                </template>
            </el-table-column>
            <el-table-column label="总上门占比" align="center" prop="id" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ scope.row.visitcount_total_ratio }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { getOrgDistributeDataStatics } from "@/api/crmsys/report/custStatics";
export default {
    name: "OrgDistributeDataStatics",
    dicts: [
        "crm_dept_level"
    ],
    data() {
        return {
            queryType: "4",
            timeGroup: null,
            // 遮罩层
            loading: false,
            custinfoList: [],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        }
    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（访问DOM元素）
    mounted() {

    },
    // methods方法
    methods: {
      /** 总计 */
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总计';
            return;
          }
          if(column.property != 'dept_name' && column.property != 'id'){
            sums[index]=this.calculateSum(data,column.property);
          }else{
            sums[index]='--';
          }
        });
        return sums;
      },
      calculateSum(data,name){
        let sum=0;
        data.forEach(value =>{
          sum=sum+value[name];
        });
        return sum;
      },
        handleQuery() {
            this.getList();
        },
        resetQuery() {
            this.queryType= "4";
            this.timeGroup=null;
         },
        getList(){
            if(this.timeGroup==null||this.timeGroup==""){
                //必须选择时间

              this.$message.error("请选择要查询的时间！");
              return;
            }
            this.loading = true;
            getOrgDistributeDataStatics(this.queryType,this.timeGroup).then(response=>{
                this.custinfoList=response.rows;

                console.log(this.custinfoList)
            });
            this.loading = false;
        }
    }
}
</script>
<style lang="scss" scoped>
@import '@/assets/styles/command.scss';
</style>
